<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      ordersData: [
        {
          serialNum: "stonedt_bak_20220111301",
          type: "MySQL",
          originalAddress: "192.168.71.62/dbname",
          destination: "远程NFS",
          storageCapacity: "2.41G",
          backupDate: "2022-1-13",
          remarks: "测试备份数据",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "serialNum", label: "备份序列号" },
        { key: "type", label: "数据类型" },
        { key: "originalAddress", label: "备份原地址" },
        { key: "destination", label: "备份目的地" },
        { key: "storageCapacity", label: "存储容量" },
        { key: "backupDate", label: "备份日期" },
        { key: "remarks", label: "备份备注" },
      ],
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  mounted() {
    // Set the initial number of items
    this.totalRows = this.ordersData.length;
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    // 种子详情
    seedDetail(row){
      console.log(row);
      this.$router.push('/spider/siteDetail')
    },
  }
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="search-box">
      备份历史纪录
    </div>
    <div class="table-responsive">
      <b-table
        class="table-centered"
        :items="ordersData"
        :fields="fields"
        responsive="sm"
        :per-page="perPage"
        :current-page="1"
        thead-class="thead-light"
        @filtered="onFiltered"
      >
      </b-table>
    </div>
    <div class="row">
      <div class="col">
        <div class="dataTables_paginate paging_simple_numbers float-right">
          <ul class="pagination pagination-rounded mb-0">
            <!-- pagination -->
            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  float: left;
  width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.border-radius{
  border-radius: 0px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}
.right-dropdown{
  ::v-deep .btn{
    font-size: 0;
    border-radius: 0px;
    padding: 0.47rem 0.5rem;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    i{
      font-size: 0.9rem;
      vertical-align: middle;
    }
  }
}
.search-box{
  margin-top: 12px;
  margin-bottom: 12px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.table-centered{
  ::v-deep thead,::v-deep tbody{
    tr{
      th:last-child,td:last-child{
        text-align: right;
      }
    }
  }
}
</style>

